<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第3天</title>
</head>
<body>
<script>
    // 函数作业
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], evenArr = [];
    evenArr = arr.filter(item => item % 2 === 0).map(item => item.toString());
    console.log(evenArr);

    let target = {};
    function task(arr, callback, target) {
        let i = 0, time = null;
        time = setInterval(() => {
            if (i >= arr.length) {
            clearInterval(time);
            callback.call(target);
        } else {
            console.log(arr[i]);
            i++;
        }
    }, 1000);
    }

    task(arr, function() {
        console.log('任务完成！');
        console.log('- this === target -', this === target);
    }, target);

    // 面向对象作业
    function Shap (width, height) {
        if (arguments.length > 1) {
            this.width = width;
            this.height = height;
        } else {
            this.radius = width;
        }
    }
    Shap.prototype.draw = function () {
        this.width && console.log('-- this.width --', this.width);
        this.height && console.log('-- this.height --', this.height);
        this.radius && console.log('-- this.radius --', this.radius);
    }
    Shap.prototype.area = function () {
        console.log('- area -', this.radius ? Math.PI * this.radius * this.radius : this.width * this.height);
    }
    function Rectanle (width, height) {
        Shap.apply(this, [width, height]);
    }
    Rectanle.prototype = new Shap();
    //创建一个矩形，宽2，高4
    let rectanle = new Rectanle(2, 4);

    function Circle (width) {
        Shap.call(this, width);
    }
    Circle.prototype = new Shap();
    //创建一个圆，半径2
    let circle = new Circle(2);

    function Triangle (width, height) {
        Shap.call(this, width, height);
    }
    Triangle.prototype = new Shap();
    Triangle.prototype.area = function () {
        console.log('- area -', this.width * this.height / 2);
    }
    //创建一个三角型，底3，高6
    let triangle = new Triangle(3,6);

    let shapArr = [rectanle, circle, triangle];
    shapArr.forEach(shap => {
        shap.draw();
        shap.area();
    });

    // es6
    class ShapEs6 {
        constructor (width, height) {
            this.width = width;
            this.height = height;
        }
        draw () {
            console.log('-- this.width --', this.width);
            console.log('-- this.height --', this.height);
        }
        area () {
            console.log('-- area --', this.width * this.height);
        }
    }

    class RectanleEs6 extends ShapEs6 {
        constructor (x, y) {
            super(x, y);
        }
    }
    //创建一个矩形，宽2，高4
    let rectanleEs6 = new RectanleEs6(2, 4);
    // rectanle.draw();
    // rectanle.area();

    class CircleEs6 extends ShapEs6 {
        constructor (x, y, r) {
            super(x, y);
            this.radius = r;
        }
        draw () {
            console.log('-- this.radius --', this.radius);
        }
        area () {
            console.log('-- area --', Math.PI * this.radius * this.radius);
        }
    }
    //创建一个圆，半径2
    let circleEs6 = new CircleEs6(2, 2, 2);
    // circle.draw();
    // circle.area();

    class TriangleEs6 extends ShapEs6 {
        constructor (x, y) {
            super(x, y);
        }
    }
    //创建一个三角型，底3，高6
    let triangleEs6 = new TriangleEs6(3,6);

    let shapArrEs6 = [rectanleEs6, circleEs6, triangleEs6];
    shapArrEs6.forEach(shap => {
        shap.draw();
        shap.area();
    })
</script>
</body>
</html>